<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入JSTL核心标签 前缀C开头 -->
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../bootstrap/js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- 为了确保适当的绘制和触屏缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工管理页面</title>
</head>
<script type="text/javascript">
   $(function(){
	   //新增员工时判断两次密码输入是否一致
	   $("#newPsw2").blur(function(){
   		var  newpsw1 = $("#newPsw1").val();
   		var  newpsw2 = $(this).val();
   		if(newpsw1==newpsw2){
   			 $("span").text("");
   		     $("#addEmp_form").attr("onsubmit","return true");
   		}else{
   			 $("span").text("请确保两次密码输入一致");
   			 $("#addEmp_form").attr("onsubmit","return false");
   		 }
   	   });
	   
	   //显示增加员工的表单
	   $("#addEmp").click(function(){
		   $("#add").show();
	   });
   });
</script>
<body>
     <div class="container" >
     
         <!-- 查询员工 -->
         <div class="row">
	         <form class="form-inline" style="margin-top: 20px" action="selectEmployees.do">
				  <div class="form-group">
				    <label for="exampleInputName2">姓名</label>
				    <input type="text" class="form-control" id="selsct_name" name="selsct_name" placeholder="张三">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputEmail2" style="margin-left: 30px">账号</label>
				    <input type="text" class="form-control" id="select_account" name="select_account" placeholder="10001">
				  </div>
				  <div class="form-group" style="margin-left: 30px">
				    <label for="exampleInputEmail2">年龄</label>
				    <input type="text" class="form-control" id="select_age" name="select_age" placeholder="22">
				  </div>
				  <div class="form-group" style="margin-left: 30px">
				    <label for="exampleInputEmail2">电话</label>
				    <input type="text" class="form-control" id="select_phone" name="select_phone" placeholder="13356452256">
				  </div>
				  <button style="margin-left: 50px"   type="submit" class="btn btn-info">查询</button>
		          <hr>
		     </form>
	     </div>
	     
	     <div class="row" style="margin-top: 20px;margin-left: 20px">
		     <button type="button" class="btn btn-success" id="addEmp">新增员工</button>
		     <button type="button" class="btn btn-info">修改员工信息</button>
		     <button type="button" class="btn btn-danger">删除员工</button>
	     </div>
     
	    <!-- 增加员工 -->
	   <div class="row" style="margin-top: 30px;display: none"  id="add">  
	       <div class="row" style="margin-left: 30px"  >
		       <h2>新增员工</h2>
		   </div>
		   <hr>
		 <!-- 增加员工form表单 -->  
	     <form action="addEmployee.do" method="post" class="form-horizontal" id="addEmp_form">
	       <!-- 员工信息输入框 -->
	       <div class="row">
           <div class="col-md-3 col-md-offset-1" style="margin-left: 200px">
	            <div class="form-group">
				    <label for="exampleInputEmail1">用户名</label>
				    <input type="text" class="form-control" id="name" name="name" placeholder="请输入用户名">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">账号</label>
				    <input type="text" class="form-control" id="account" name="account" placeholder="请输入账号">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">密码</label>
				    <input type="password" class="form-control" id="newPsw1" placeholder="输入密码">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">确认密码</label>
				    <input type="password" class="form-control" id="newPsw2" name="newPsw2" placeholder="确认两次输入的密码一致">
				    <span style="color: red;"></span>
				</div>
			  
			</div>  	
			<div class="col-md-3" style=";margin-left: 100px">
				<div class="form-group">
				    <label for="exampleInputEmail1">部门</label>
				    <input type="text" class="form-control" id="dept" name="dept" placeholder="请输入员工所在部门">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">性别</label>
				    <input type="text" class="form-control" id="sex" name="sex" placeholder="性别">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">年龄</label>
				    <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">出生年月日</label>
				    <input type="date" class="form-control" id="birth" name="birth" value="2016-05-24" placeholder="出生年月日">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">联系电话</label>
				    <input type="text" class="form-control" id="phone" name="phone" placeholder="输入有效的联系电话">
				</div>
	        </div> 
	        <!-- 确认保存和取消按钮 -->
		    </div>
		     <div  class="row" style="margin-top: 20px;margin-left: 300px">
               <button type="submit" class="btn btn-primary" id="submit">确认保存</button>
               <a href="../welcome.jsp" class="btn btn-primary" role="button" style="margin-left: 150px">取消修改</a>
		    </div>
		  </form>
	  </div>
  </div>	
          
</body>
</html>